<template>
	<view class="send-comment">
		<view class="fake-input">
			<view class="input" @click="show = true">
				<u-icon name="edit-pen-fill"></u-icon>{{content.length === 0 ? '写评论...':content}}
			</view>
			<view class="btn">回复</view>
		</view>
		<u-popup v-model="show" mode='bottom' :height='popupHeight' border-radius="14"
			:mask-close-able='!friendListShow'>
			<block v-if="!friendListShow">
				<view class="input-wrap">
					<textarea value="" placeholder="写评论..." :focus="true" v-model="content" @focus="reSet" />
					<view><button>发布</button></view>
				</view>
				<view class="tool">
					<view @click="openFriendList">
						<image src="../static/icon/_@.png"></image>
					</view>
					<view @click="showEmoji">
						<image src="../static/icon/emoji.png"></image>
					</view>
				</view>
				<view class="emoji">
					<scroll-view scroll-y="true" style="height: 380rpx;">
						<view v-for="(item,index) in emojiData" @click="selemoji(item)">{{item}}</view>
					</scroll-view>
				</view>
			</block>
			<block v-else>
				<view style="font-size: 30rpx;text-align: center;padding: 20rpx;">
					@用户
				</view>
				<view style="padding:15rpx;margin-bottom: 15rpx;color: #999;"><text @click="closeFriendList">取消</text>
				</view>
				<view class="search">
					<input type="text" v-model="search" placeholder="搜索好友昵称或备注">
				</view>
				<view class="list">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view v-for="(user,index) in 100" class="list-item" @click="selectUser(user)">
							用户{{user}}
						</view>
					</scroll-view>
				</view>
			</block>

		</u-popup>


	</view>
</template>

<script>
	import emoji from "../js_sdk/m-emoji/m-emoji_2.0.0/emoji.js";

	export default {
		name: "comment",
		data() {
			return {
				show: false,
				popupHeight: '300',
				content: "",
				emojiData: emoji.slice(0, 68),
				friendListShow: false, //展开@列表
				search: ''
			};
		},
		methods: {
			//选中@用户
			selectUser() {
				this.closeFriendList()
			},
			closeFriendList() {
				this.reSet()
				setTimeout(() => {
					this.friendListShow = false
				}, 200)
			},
			reSet() {
				this.popupHeight = '300'

			},
			openFriendList() {
				this.reSet()
				this.popupHeight = '80%'
				this.friendListShow = true

			},
			selemoji(m) {
				console.log(m);
				this.content += m
			},
			showEmoji() {
				this.popupHeight = '720'
			},

		}
	}
</script>

<style lang="scss" scoped>
	.list {
		// border: 1px solid;
		height: 75%;
		margin-top: 40rpx;

		.list-item {
			padding: 15rpx 30rpx;
		}
	}

	.search {
		input {
			background-color: rgba($color: #999, $alpha:0.3);
			width: 80%;
			margin: auto;
			padding: 15rpx;
			border-radius: 50rpx;
			font-size: 28rpx;
		}
	}

	.emoji {
		// border: 1px solid;
		background-color: rgba($color: gray, $alpha: .1);
		padding: 10rpx 30rpx;
		height: 380rpx;
		margin-top: 20rpx;

		view {
			display: inline-block;
			font-size: 50rpx;
			margin: 2%;
		}
	}

	.tool {
		display: flex;
		justify-content: flex-end;
		margin-right: 30rpx;
		align-items: center;

		view {
			margin: 0 20rpx;

			image {
				height: 48rpx;
				width: 48rpx;
			}
		}

	}

	.input-wrap {
		display: flex;
		align-items: center;

		textarea {
			border-radius: 14rpx;
			background-color: rgba($color: gray, $alpha: .1);
			margin: 20rpx;
			height: 180rpx;
			padding: 10rpx;
		}

		button {
			background: none;
			outline-style: none;
			font-size: 26rpx;
		}
	}

	.fake-input {
		padding: 10rpx;
		border-top: 1px solid rgba($color: #999, $alpha: .5);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn {
			background-color: rgba($color: $primaryColor, $alpha: .7);
			color: #FFFFFF;
			font-size: 26rpx;
			padding: 20rpx 40rpx;
			border-radius: 50rpx;
		}

		.input {
			height: 80rpx;
			width: 80%;
			background-color: rgba($color: #999, $alpha: .3);
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #999;
			overflow: hidden;
			white-space: nowrap;

			.u-icon {
				margin: 0 20rpx;
			}
		}
	}

	.send-comment {
		position: fixed;
		bottom: 0;
		z-index: 9999;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
	}
</style>
